<template>
  <div class="card">
    <ul>
      <li v-for="(item, index) in treeData" :key="index">
        <div
          class="item"
          :class="{
            'line-left': index !== 0,
            'line-right': index != treeData.length - 1,
          }"
        >
          <div
            class="item-name"
            :class="{
              'line-bottom': item.son_data && item.son_data.length > 0,
              'line-top': !treeFirst,
              classB: item.pid === 3,
              classA: item.pid === 1,
            }"
          >
            <el-tooltip
              class="item"
              effect="dark"
              :content="
                'code:' +
                item.user_code +
                ';grade:' +
                item.grade +
                ';date:' +
                item.date
              "
              placement="top-start"
            >
              <div class="div1">
                <div>{{ item.user_code }}</div>
                <div style="padding: 0.1rem 0">UID: {{ item.id }}</div>
                <div>{{ item.date }}</div>
              </div>
            </el-tooltip>
          </div>
        </div>
        <tree-item
          v-if="item.son_data && item.son_data.length > 0"
          :tree-data="item.son_data"
        />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "TreeItem",
  props: {
    treeData: {
      type: Array,
      default: () => [],
    },
    treeFirst: {
      //判断是否第一个
      type: Boolean,
      default: false,
    },
  },
  methods: {
    addChild(item) {
      this.$emit("DetailsOpeartion", item.id);
    },
  },
};
</script>

<style lang="scss" scoped>
$line-length: 22px; //线长
$spacing: 22px; //间距
$extend: calc(#{$spacing} + 2px); //延长线

// 线样式
@mixin line {
  content: "";
  display: block;
  width: 3px;
  height: $line-length;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  background: #999;
}

// 加减号icon
@mixin icon {
  position: absolute;
  border: solid 1px #666;
  border-radius: 100%;
  bottom: -5px;
  width: 12px;
  height: 12px;
  line-height: 10px;
  text-align: center;
  color: #666;
  z-index: 100;
  cursor: pointer;
  margin: 0;
  padding: 0;
  // opacity: 0;
}
.div1 {
  display: flex;
  justify-content: left;
  flex-direction: column;
  font-size: 22px;
  text-align: center;
  border-radius: 6px;
}
.card {
  ul {
    display: flex;
    justify-content: center;

    li {
      .item {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        &-name {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 160px;
          height: 160px;
          padding: 6px;
          margin: $spacing;
          border-radius: 50%;
          /*border: aliceblue 6px solid;*/
          background-image: linear-gradient(to bottom, #e3d4ff, #c1a3fe);
          color: #fff;

          .plus {
            @include icon();

            &:hover {
              opacity: 100%;
            }
          }

          .reduce {
            @include icon();
            top: -5px;

            &:hover {
              opacity: 100%;
            }
          }
        }
      }
    }
  }
  .classA {
    background: linear-gradient(to bottom, #a5d3f0, #31b7ff) !important;
  }

  .classB {
    background: linear-gradient(to bottom, #fff0d1, #f7b768) !important;
  }
  // 向下的线
  .line-bottom {
    &::after {
      @include line();
      bottom: -$line-length;
    }
  }

  // 向上的线
  .line-top {
    &::before {
      @include line();
      top: -$line-length;
    }
  }

  // 向左的线
  .line-left {
    &::after {
      @include line();
      width: calc(50% + #{$spacing});
      height: 3px;
      left: calc(-50% - #{$extend});
      top: 0;
    }
  }

  // 向右的线
  .line-right {
    &::before {
      @include line();
      width: calc(50% + #{$spacing});
      height: 3px;
      right: calc(-50% - #{$extend});
      top: 0;
    }
  }
}
</style>
